<template>
  <div>
    <!-- 
      路由导航(路由跳转)不要直接使用 a 标签，有两个问题：
        1. 不同的路由模式时，需要修改 href 属性的值
        2. 当路由模式为 history 模式时，跳转会重新加载页面。丢失了路由特性。
        解决方案：使用路由提供的 RouterLink 组件即可。

      RouterLink 组件
        1. to - 控制要跳转的路由地址
          - 字符串写法：
            to="/home"
          - 对象写法：
            :to="{
              path: '/home', // 要跳转到路径
              name: 'home',  // 路由的 name 配置项
              // 表示携带到跳转的路由时的？号参数  /home?key1=value1&key2=value2
              query: {       
                key1: value1,
                key2: value2
              },
              // 表示动态路径传参
              //    PS: params 只能与 name 一同使用，不能与 path 一起使用
              //        /home/value1/value2
              params: {
                key1: value1,
                key2: value2
              }
            }"
        2. activeClass - 控制当前匹配路由时要添加的类名，默认值为 router-link-active
        3. tag - 控制要渲染成的元素，默认为 a 标签
            VueRouter@3 中支持
            VueRouter@4 不支持
            Vue2:
              <router-link to="/home" tag="button">
                go Home
              </router-link>
            Vue3:
              <router-link to="/home" custom v-slot="{ navigate }">
                <button @click="navigate">go Home</button>
              </router-link>

     -->
    <ul>
      <li>
        <!-- <a href="/home">go Home</a> -->
        <router-link
          to="/home"
          active-class="abcd"
          custom
          v-slot="{ navigate }"
        >
          <button @click="navigate">go Home</button>
        </router-link>
      </li>
      <li>
        <!-- <a href="/about">go About</a> -->
        <RouterLink to="/about" active-class="abcd">go About</RouterLink>
      </li>
      <li>
        <!-- 使用对象写法跳转到 首页 -->
        <RouterLink :to="{ name: 'home' }">go Home</RouterLink>
      </li>
      <li>
        <!-- 使用字符串写法跳转到 详情页，携带 ？ 号参数 -->
        <RouterLink to="/info?key1=value1&key2=value2"> go Detail </RouterLink>
        <!-- 使用对象写法跳转到 详情页，携带 ? 号参数 -->
        <RouterLink
          :to="{
            path: '/info',
            query: {
              key1: 'value1',
              key2: 'value2',
            },
          }"
        >
          go Detail
        </RouterLink>
      </li>
      <li>
        <!-- 使用字符串方式跳转到 电影详情页面，需要动态路径参数 -->
        <RouterLink to="/film/100">go Film 100</RouterLink>
        <!-- 使用对象方式跳转到 电影详情页面，需要动态路径参数 -->
        <RouterLink
          :to="{
            // path: '/film/200',
            name: 'film',
            params: {
              id: '200',
            },
          }"
        >
          go Film 200
        </RouterLink>
      </li>
    </ul>
    <hr />

    <h1>App</h1>
    <hr />
    <!-- 这里需要根据URL地址来渲染不同的组件，就放置 RouterView 组件占位 
      /home  => Home
      /about => About

      <router-view />
    -->
    <RouterView />
  </div>
</template>
